<template>
	<view class="content">
		<view  class="userMain">
			<van-cell-group v-if="user.id!=''" style="padding: 0 10upx;" inset>
				<van-cell is-link size="large" center @click="editMessage(user.id)" >
					<view slot="title">
						<van-image fit="cover" radius="10px" width="4rem" height="4rem" :src="user.avatarUrl" />
						<text class="userName">
							
							{{user.nickName}}
						</text>
					</view>
				</van-cell>
			</van-cell-group>
			<van-cell-group v-else style="padding: 0 10upx;" inset>
				<van-cell is-link size="large" center use-label-slot @click="sendLogin">
					<view slot="title">
						<view class="login_hit">
							Hi~欢迎来到开摆的小空间
						</view>
					</view>
					<view slot="label">
						<text style="font-size: 25upx;"> 登录后体验更多功能</text>
						<view class="login_button">
							登录/注册
						</view>
					</view>
				</van-cell>
			</van-cell-group>
			<view class="my_order">
				<view style="margin-left: 20upx; display: flex;">
					<view class="order_text">
						我的订单
					</view>
					<view class="order_item" v-for="(item,index) in myOrderItem" :key="index" @click="toDetail">
						<view>
							<van-icon :color="item.color" size="30" :name="item.iconName" />
						</view>
						<view style="font-size: 30upx;margin-left: -13upx; width: 160upx;position: absolute;">
							{{item.title}}
						</view>
					</view>
				</view>

			</view>
			<van-cell-group style="padding: 0 10upx;" inset>
				<van-cell is-link v-for="(item,index) in cellList" :key="index" :url="item.url">
					<view slot="icon" class="cell-icon">
						<van-icon size="20px" :name="item.iconName" :color="item.color" />
					</view>
					<view slot="title" class="cell-title">
						<text style="size: 20upx;">{{item.title}}</text>
					</view>
				</van-cell>
			</van-cell-group>




		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					nickName: "违规用户请联系管理员",
					avatarUrl: "https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com/linna.jpg",
					gender: "",
					id: ""
				},
				title: 'Hello',
				myOrderItem: [{
					url: "./myPublish",
					color: "#fad556",
					iconName: "balance-pay",
					title: "待付款"
				}, {
					url: "./myPublish",
					color: "#fad556",
					iconName: "certificate",
					title: "已完成"
				}, {
					url: "./myPublish",
					color: "#fad556",
					iconName: "after-sale",
					title: "退款中"
				}, {
					url: "./myPublish",
					color: "#fad556",
					iconName: "description",
					title: "所有单"
				}, ],
				cellList: [{
						url: "./myPublish",
						color: "#86fafa",
						iconName: "invitation",
						title: "我的发布"
					},
					{
						url: "",
						color: "red",
						iconName: "flower-o",
						title: "我的喜欢"
					}, {
						url: "",
						color: "green",
						iconName: "description",
						title: "我的订单"
					}, {
						url: "./myStore",
						color: "#de890b",
						iconName: "shop",
						title: "我的小店"
					}, {
						url: "",
						color: "red",
						iconName: "location",
						title: "我的地址"
					}
				]
			}
		},
		onLoad() {
			if(uni.getStorageSync("user")!=''){
				this.user = uni.getStorageSync("user");
			}
			
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url:"../order/order"
				})
			},
			getLogin() {
				return new Promise((resolve, reject) => {
					wx.login({
						success(res) {
							resolve(res.code)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			getUserInfo() {
				return new Promise((resolve, reject) => {
					uni.getUserProfile({
						lang: 'zh_CN',
						desc: '用户登录',
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			//发送登录请求
			sendLogin() {
				let userInfo = this.getUserInfo();
				let wxCode = this.getLogin();

				/**
				 * 等待上面完成执行请求
				 */
				Promise.all([wxCode, userInfo]).then((res) => {
					//都获取权限成功
					this.$request('/user/login', {
						// 传参参数名：参数值,如果没有，就不需要传
						code: res[0],
						data: res[1].encryptedData,
						iv: res[1].iv
					}, 'POST').then(res => {
						const {
							avatarUrl,
							gender,
							id,
							kbToken,
							nickName
						} = res
						this.user.avatarUrl = avatarUrl;
						this.user.id = id
						this.user.gender = gender;
						this.user.nickName = nickName;
						uni.setStorageSync("user",res);
						uni.setStorageSync("token",kbToken);
						console.log("token值为",kbToken);
					})
				}).catch(err => {

				})
			},
		editMessage(id){
			uni.navigateTo({
				url:"./editUserMessage?userId="+encodeURIComponent(JSON.stringify(id))
			})
		}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #fad556;
	}

	.content {
		border-top-right-radius: 80upx;
		border-top-left-radius: 80upx;
		height: 110%;
		background-color: #f2f2f5;
		margin-top: 5%;
	}

	.userMain {
		width: 750upx;
		height: 750upx;
	}

	.userName {
		width: 250rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 700;
		position: absolute;
		padding-left: 30upx;
		padding-top: 5upx;
	}

	.cell-title {
		padding-left: 30upx;
	}

	.cell-icon {
		padding-top: 5upx;
	}

	.order_item {
		margin-top: 60upx;
		/* margin-left: 10upx; */
		width: 60upx;
		height: 40upx;
		padding: 10px 35px;
		padding-right: 35px;
	}

	.my_order {
		display: flex;
		/* margin-top: 40upx; */
		background-color: white;
		border-radius: 10upx;
		margin-left: 37upx;
		width: 670upx;
		height: 200upx;
	}

	.order_text {
		position: absolute;
		font-size: 30upx;
		font-weight: 700;
		margin-left: 20upx;
		margin-top: 20upx;
	}

	.login_button {
		line-height:25px;
		font-weight: 700;
		padding: 10upx 10upx;
		color: white;
		width: 35%;
		height: 50upx;
		text-align: center;
		border-radius: 40upx;
		background-color: #fad556;
	}

	.login_hit {
		font-weight: 700;
	}
</style>
